<script setup>
import { ref, watch } from 'vue';

// 计数器
const count = ref(0)
const handleClick = () => {
  count.value ++
}
// 监听一个响应式数据 (必会)
watch(count, () => {
  // 监听后该干啥,取决于业务需求
  console.log(count.value);
})

// 文字消息
const msg = ref('你好世界')
const translate = () => {
  msg.value = 'hello world'
}
watch([count, msg], () => {
  console.log('两个数据同时监听', count.value, msg.value);
})
</script>

<template>
  <div>计数器: {{count}}</div>
  <button @click="handleClick">+1</button>

  <div>{{msg}}</div>
  <button @click="translate">翻译</button>
</template>

<style lang="scss" scoped></style>
